<template>
    <div class="header">
        <el-container>
            <el-header height='90px'>
                <div class="logo">
                    <img src="../images/home-cz/logo.png" alt="" class="logoimg">
                </div>
                <div class="menubtn" v-for="item in btnlist" :key="item.index" @click="jump(item.path1),isshow = item.index" :class="{'bgcol':item.index == isshow}">
                    <div class="menubtn-img">
                        <img :src="item.imgurl2" alt="" v-if="item.index == isshow"/>
                        <img :src="item.imgurl1" alt="" v-else />
                    </div>
                    <p :class="{'menutitle':item.index == isshow}">{{item.levelMenu}}</p>
                </div>
            </el-header>
        </el-container>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                btnlist:[
                    {levelMenu:'房间',index:'1',imgurl1:require('../images/home-cz/home.png'),imgurl2:require('../images/home-cz/activehome.png'),path1:"/Home/homecontent/",isshow:true},
                    {levelMenu:'订单',index:'2',imgurl1:require('../images/home-cz/home.png'),imgurl2:require('../images/home-cz/activehome.png'),path1:"/Home/orderList/",isshow:true},
                    {levelMenu:'预约',index:'3',imgurl1:require('../images/home-cz/home.png'),imgurl2:require('../images/home-cz/activehome.png'),path1:"/Home/appointment/",isshow:true},
                    {levelMenu:'会员',index:'5',imgurl1:require('../images/home-cz/home.png'),imgurl2:require('../images/home-cz/activehome.png'),path1:"/Home/vip/",isshow:true},
                    {levelMenu:'技师',index:'4',imgurl1:require('../images/home-cz/home.png'),imgurl2:require('../images/home-cz/activehome.png'),path1:"/Home/technicians/",isshow:true},
                    {levelMenu:'礼品',index:'6',imgurl1:require('../images/home-cz/home.png'),imgurl2:require('../images/home-cz/activehome.png'),path1:"/Home/gift/",isshow:true},
                    {levelMenu:'交接班',index:'7',imgurl1:require('../images/home-cz/home.png'),imgurl2:require('../images/home-cz/activehome.png'),path1:"/Home/b/",isshow:true},
                    {levelMenu:'设置',index:'8',imgurl1:require('../images/home-cz/home.png'),imgurl2:require('../images/home-cz/activehome.png'),path1:"/Home/b/",isshow:true},
                    {levelMenu:'关机',index:'9',imgurl1:require('../images/home-cz/home.png'),imgurl2:require('../images/home-cz/activehome.png'),path1:"/Home/b/",isshow:true},
                ],
                isshow:'1'
            }
        },
        methods: {
          jump(path){
              if(this.$route.path === path)return;
              this.$router.push(path)
          }
        }

    }
</script>

<style scoped lang='sass'>
   @import '@/css/Header.scss'
</style>
